<template>
	<div class="app-container">
		<!-- 查询和其他操作 -->
		<div class="filter-container">
			<el-select v-model="listQuery.userType" style="width: 200px" class="filter-item" placeholder="请选择用户类型">
				<el-option v-for="(key, value) in typeDic" :key="key" :label="key" :value="value"/>
			</el-select>
			<el-input v-model="listQuery.phone" clearable class="filter-item" style="width: 200px;"
			          placeholder="请选择用户手机号"/>
			<el-input v-model="listQuery.nickName" clearable class="filter-item" style="width: 200px;"
			          placeholder="请输入昵称"/>
			<el-button v-permission="[1]" class="filter-item" type="primary" icon="el-icon-search"
			           @click="handleFilter">查找
			</el-button>
		</div>

		<!-- 查询结果 -->
		<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
		          highlight-current-row>
			<el-table-column align="center" width="100px" label="用户ID" prop="id" sortable/>

			<el-table-column align="center" width="80px" label="用户名" prop="username"/>
			<el-table-column align="center" width="80px" label="昵称" prop="nickName"/>
			<el-table-column align="center" width="80px" label="真实姓名" prop="realName"/>

			<el-table-column align="center" width="120px" label="手机号码" prop="phone"/>

			<el-table-column align="center" width="80px" label="用户类型" prop="userType">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.userType | typeDicFilter }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column align="center" label="微信id" prop="openid"/>

			<el-table-column align="center" label="创建时间" prop="createdTime">
				<template slot-scope="scope">{{ scope.row.createdTime | formatTime }}</template>
			</el-table-column>
			x
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
		            @pagination="getList"/>

	</div>
</template>

<script>
	import {fetchList, activeUser, createUser, updateUser, deleteUser} from '@/api/user'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

	const typeDic = {
		0: '采购商',
		1: '供应商',
		2: '游客'
	}
	export default {
		name: 'User',
		components: {Pagination},
		filters: {
			typeDicFilter(code) {
				return typeDic[code]
			}
		},
		data() {
			return {
				list: undefined,
				total: 0,
				listLoading: true,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					nickName: undefined,
					phone: undefined,
					userType: undefined
				},
				dataForm: {
					id: undefined,
					level: undefined,
					phone: undefined,
					gender: undefined,
					nickname: undefined,
					birthday: undefined,
					status: undefined,
					password: undefined
				},
				typeDic
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				fetchList(this.listQuery)
					.then(res => {
						this.list = res.data.records
						this.total = res.data.total
						this.listLoading = false
					})
					.catch(() => {
						this.list = []
						this.total = 0
						this.listLoading = false
					})
			},
			resetForm() {
				this.dataForm = {
					id: undefined,
					level: undefined,
					phone: undefined,
					gender: undefined,
					nickname: undefined,
					birthday: undefined,
					status: undefined
				}
			},
			handleFilter() {
				this.listQuery.pageNum = 1
				this.getList()
			},
			handleStatus(row) {
				this.resetForm()
				this.dataForm.id = row.id
				this.dataForm.status = row.status === 1 ? 0 : 1
				activeUser(this.dataForm)
					.then(res => {
						this.$notify.success({
							title: '成功',
							message: '状态更改成功'
						})
						this.getList()
					})
					.catch(() => {
						this.list = []
						this.total = 0
						this.listLoading = false
					})
			},
			handleCreate() {
				this.resetForm()
				this.dialogStatus = 'create'
				this.dialogFormVisible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].clearValidate()
				})
			},
			createData() {
				this.$refs['dataForm'].validate(valid => {
					if (valid) {
						createUser(this.dataForm)
							.then(response => {
								this.list.unshift(response.data.data)
								this.dialogFormVisible = false
								this.$notify.success({
									title: '成功',
									message: '创建成功'
								})
								this.listQuery.nickname = this.dataForm.nickname
								this.getList()
							})
							.catch(response => {
								this.$notify.error({
									title: '失败',
									message: response.data.errmsg
								})
							})
					}
				})
			},
			handleUpdate(row) {
				this.dataForm = Object.assign({}, row)
				this.dialogStatus = 'update'
				this.dialogFormVisible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].clearValidate()
				})
			},
			updateData() {
				this.$refs['dataForm'].validate(valid => {
					if (valid) {
						updateUser(this.dataForm)
							.then(() => {
								for (const v of this.list) {
									if (v.id === this.dataForm.id) {
										const index = this.list.indexOf(v)
										this.list.splice(index, 1, this.dataForm)
										break
									}
								}
								this.dialogFormVisible = false
								this.$notify.success({
									title: '成功',
									message: '更新用户成功'
								})
							})
							.catch(res => {
								this.$notify.error({
									title: '失败',
									message: res
								})
							})
					}
				})
			}
		}
	}
</script>
